<template>
  <el-tabs
    v-if="tabsList.length > 1"
    v-model="tabsIndex"
    class="demo-tabs"
    :closable="isDelete"
    type="card"
    @tab-click="handleTab"
    @tab-remove="removeTab"
  >
    <el-tab-pane
      v-for="(item, i) in tabsList"
      :key="item.label"
      :label="item.label"
      :name="i + 1"
    >
      <template #label>
        {{ item.label }}
        <div v-show="isUpdate ? true : false" class="flex">
          <vab-icon
            icon="file-copy-2-line"
            style="margin-right: 4px; margin-left: 8px"
            @click="handleCopy(i)"
          />
          <vab-icon icon="add-box-line" @click="handleNew(i)" />
        </div>
      </template>
    </el-tab-pane>
  </el-tabs>
</template>

<script lang="ts" setup>
  import { TabsPaneContext } from 'element-plus'
  const props = defineProps({
    isDelete: {
      type: Boolean,
      default: true,
    },
    isUpdate: {
      type: Boolean,
      default: false,
    },
    tabsList: {
      type: Array,
      default: () => {
        return []
      },
    } as any,
    Key: {
      type: String,
      default: '',
    },
  })
  const tabsIndex = ref(0)
  const state = reactive({})

  const emit = defineEmits([
    'handleCopy',
    'handleNew',
    'handleTab',
    'removeTab',
  ])
  // tab选择
  const handleTab = (tab: TabsPaneContext) => {
    tabsIndex.value = Number(tab?.props?.name)
  }
  // tab删除
  const removeTab = (value: any) => {
    emit('removeTab', props.Key, Number(value) - 1)
  }
  // 复制
  const handleCopy = (index: number) => {
    emit('handleCopy', props.Key, index)
  }
  // 新建
  const handleNew = (index: number) => {
    emit('handleNew', props.Key, index)
  }
</script>

<style lang="scss" scoped></style>
